<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全态势分析报告</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #2E95F8;
            --high-risk: #FF4D4F;
            --medium-risk: #FAAD14;
            --low-risk: #52C41A;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: #060606;
            color: #E9EAEC;
            line-height: 1.6;
        }

        .row {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
        }

        .col {
            flex: 1;
        }

        .page {
            max-width: 1400px;
            margin: 24px auto;
            padding: 0 16px;
        }

        .header {
            margin-bottom: 24px;
            padding: 24px;
            background-color: #09162F;
            border-left: 4px solid var(--high-risk);
        }

        .header h1 {
            color: #129BFF;
            font-size: 32px;
            margin-bottom: 8px;
        }

        .header h1 span {
            color: var(--high-risk);
            font-size: 24px;
            margin-left: 12px;
        }

        .header p {
            color: #A0AEC0;
        }

        .card {
            border-radius: 4px;
            padding: 24px;
            border: 1px solid #1B64AA;
            background: rgba(8, 26, 48, 0.8);
            height: 100%;
        }

        .card-title {
            margin-bottom: 16px;
            font-size: 18px;
            color: #2E95F8;
            border-bottom: 1px solid #1B64AA;
            padding-bottom: 8px;
        }

        .overview {
            display: flex;
            gap: 24px;
        }

        .overview-item {
            flex: 1;
            text-align: center;
        }

        .overview-item .value {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary);
        }

        .overview-item .label {
            color: #A0AEC0;
            font-size: 14px;
        }

        .summary-grid {
            display: flex;
            gap: 24px;
        }

        .risk-data,
        .recommendations {
            flex: 1;
        }

        .risk-data h3,
        .recommendations h3 {
            color: #2E95F8;
            margin-bottom: 12px;
            font-size: 16px;
        }

        .risk-data ul,
        .recommendations ol {
            padding-left: 20px;
        }

        .risk-data li,
        .recommendations li {
            margin-bottom: 8px;
        }

        .high-risk {
            color: var(--high-risk);
            font-weight: bold;
        }

        .medium-risk {
            color: var(--medium-risk);
        }

        .low-risk {
            color: var(--low-risk);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
        }

        th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #1B64AA;
        }

        th {
            background-color: rgba(8, 26, 48, 0.8);
            color: #2E95F8;
        }

        tr:nth-child(even) {
            background-color: rgba(16, 42, 76, 0.4);
        }

        tr.high-risk {
            background-color: rgba(255, 77, 79, 0.1);
        }

        .missing {
            color: var(--high-risk);
            font-style: italic;
        }

        caption {
            text-align: left;
            font-weight: bold;
            margin-bottom: 8px;
            color: #2E95F8;
        }

        .chart-container {
            display: flex;
            gap: 24px;
        }

        .data-table {
            flex: 1;
        }

        .chart-legend {
            flex: 1;
            padding: 16px;
            background: rgba(8, 26, 48, 0.6);
            border-radius: 4px;
        }

        .chart-legend p {
            margin-bottom: 12px;
        }

        .timeline ul {
            list-style-type: none;
            border-left: 2px solid #1B64AA;
            padding-left: 24px;
        }

        .timeline li {
            margin-bottom: 12px;
            position: relative;
        }

        .timeline li:before {
            content: "";
            position: absolute;
            left: -30px;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #2E95F8;
        }

        .timeline li.prediction:before {
            background-color: var(--high-risk);
        }

        .attack-tree ul {
            list-style-type: none;
            padding-left: 20px;
            border-left: 2px solid #1B64AA;
        }

        .attack-tree li {
            margin-bottom: 8px;
            position: relative;
        }

        .attack-tree li:before {
            content: "";
            position: absolute;
            left: -20px;
            top: 10px;
            width: 10px;
            height: 2px;
            background-color: #1B64AA;
        }

        .tree-note,
        .timeline-note {
            padding: 12px;
            background: rgba(8, 26, 48, 0.6);
            border-radius: 4px;
            margin-top: 12px;
            font-size: 14px;
        }

        @media (max-width: 768px) {

            .row,
            .summary-grid,
            .chart-container {
                flex-direction: column;
            }

            .overview {
                flex-wrap: wrap;
            }

            .overview-item {
                flex: 1 1 45%;
            }
        }
    </style>
</head>

<body>

    <div class="page">

        <!-- 头部 -->
        <div class="header">
            <h1>网络安全态势分析报告 <span>高危状态</span></h1>
            <p>最新安全威胁评估与防护建议</p>
        </div>

        <div class="main">

            <!-- 报告摘要 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">报告摘要</h2>
                        <div class="card-body">
                            <div class="summary-grid">
                                <div class="risk-data">
                                    <h3>核心风险指标</h3>
                                    <ul>
                                        <li><strong>整体安全态势评级：</strong><span class="high-risk">高危</span></li>
                                        <li><strong>权限提升类攻击(T1548)：</strong>75.1%占比，日均增长61.8%</li>
                                        <li><strong>CentOS Linux 8.2风险值：</strong>5031 (Windows 8的11.8倍)</li>
                                        <li><strong>资产信息缺失：</strong>80%受影响资产无IP地址</li>
                                    </ul>
                                </div>
                                <div class="recommendations">
                                    <h3>优先防护建议</h3>
                                    <ol>
                                        <li>补充资产IP信息并建立资产画像数据库</li>
                                        <li>部署ATT&CK框架的权限提升攻击检测规则</li>
                                        <li>对CentOS Linux 8.2实施网络隔离</li>
                                        <li>建立攻击类型关联分析模型</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 资产态势分析 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">资产态势分析</h2>
                        <div class="card-body">
                            <div class="chart-container">
                                <div class="data-table">
                                    <table>
                                        <caption>操作系统风险集中度</caption>
                                        <thead>
                                            <tr>
                                                <th>操作系统</th>
                                                <th>攻击次数</th>
                                                <th>风险值</th>
                                                <th>威胁系数</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="high-risk">
                                                <td>CentOS Linux 8.2.2004</td>
                                                <td>1677 (73.8%)</td>
                                                <td>5031</td>
                                                <td>3 (高危)</td>
                                            </tr>
                                            <tr>
                                                <td>Windows 8 (合计)</td>
                                                <td>429</td>
                                                <td>429</td>
                                                <td>1 (低危)</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="chart-legend">
                                    <p><strong>风险值计算公式：</strong>命中次数 × 威胁等级系数</p>
                                    <ul>
                                        <li>CentOS: 1677 × 3 = 5031</li>
                                        <li>Windows: 182 + 144 + 103 = 429</li>
                                    </ul>
                                    <canvas id="osRiskChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 三列布局 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">攻击时间趋势</h2>
                        <div class="card-body">
                            <div class="timeline">
                                <ul>
                                    <li><strong>5月10日：</strong>44次(基线)</li>
                                    <li><strong>5月11日：</strong>64次(+45.5%)</li>
                                    <li><strong>5月12日：</strong>70次(-53.1%环比)</li>
                                    <li><strong>5月13日：</strong>605次(+823%环比)</li>
                                    <li><strong>5月14日：</strong>1086次(+80%环比)</li>
                                    <li class="prediction"><strong>预测5月15日：</strong>≈1738次(斐波那契增长模型)</li>
                                </ul>
                            </div>
                            <div class="timeline-note">
                                <p><strong>增长模型：</strong>前一日攻击量 × 1.618 (1086 × 1.618 ≈ 1738)</p>
                            </div>
                            <canvas id="attackTrendChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">攻击类型关联分析</h2>
                        <div class="card-body">
                            <ul class="attack-tree">
                                <li>
                                    <strong>T1548 权限提升攻击 (75.1%)</strong>
                                    <ul>
                                        <li>T1548.002 权限提升-子技术 (5.8%)</li>
                                        <li>
                                            <strong>后续关联攻击</strong>
                                            <ul>
                                                <li>T1053 Linux At命令 (11.4%)</li>
                                                <li>T1218 可疑脚本执行 (7.3%)</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="tree-note">
                                <p><strong>关联性分析：</strong>权限提升后72小时内触发T1053的概率为4.6倍，触发T1218的概率为2.5倍</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">Windows 8资产详情</h2>
                        <div class="card-body">
                            <table>
                                <thead>
                                    <tr>
                                        <th>资产ID</th>
                                        <th>攻击次数</th>
                                        <th>风险值</th>
                                        <th>IP信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>win:3cb060cddbe813...</td>
                                        <td>182次</td>
                                        <td>182</td>
                                        <td class="missing">未提供</td>
                                    </tr>
                                    <tr>
                                        <td>win:78ff80ef1dd736...</td>
                                        <td>144次</td>
                                        <td>144</td>
                                        <td class="missing">未提供</td>
                                    </tr>
                                    <tr>
                                        <td>win:4c7528df877dcb...</td>
                                        <td>103次</td>
                                        <td>103</td>
                                        <td class="missing">未提供</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4">80%的受影响资产未提供IP地址，导致攻击溯源能力受限</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细防护建议 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title">详细防护建议</h2>
                        <div class="card-body">
                            <ol class="recommendations-detailed">
                                <li>
                                    <strong>资产信息完善</strong>
                                    <ul>
                                        <li>通过资产ID反向查询Windows 8实例的IP地址</li>
                                        <li>完善资产数据库字段：IP地址、地理位置、业务角色</li>
                                    </ul>
                                </li>
                                <li>
                                    <strong>权限提升防御</strong>
                                    <ul>
                                        <li>定期扫描CentOS的SUID/SGID权限程序</li>
                                        <li>部署基于文件哈希的完整性校验机制</li>
                                    </ul>
                                </li>
                                <li>
                                    <strong>Windows系统加固</strong>
                                    <ul>
                                        <li>禁用非必要的wscript/cscript执行权限</li>
                                        <li>限制At命令(T1053)的使用范围</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // OS Risk Comparison Chart
        const osRiskCtx = document.getElementById('osRiskChart').getContext('2d');
        const osRiskChart = new Chart(osRiskCtx, {
            type: 'bar',
            data: {
                labels: ['CentOS Linux 8.2.2004', 'Windows 8'],
                datasets: [{
                    label: '风险值对比',
                    data: [5031, 429],
                    backgroundColor: [
                        'rgba(255, 77, 79, 0.7)',
                        'rgba(82, 196, 26, 0.7)'
                    ],
                    borderColor: [
                        'rgba(255, 77, 79, 1)',
                        'rgba(82, 196, 26, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(27, 100, 170, 0.3)'
                        },
                        ticks: {
                            color: '#A0AEC0'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#A0AEC0'
                        }
                    }
                }
            }
        });

        // Attack Trend Chart
        const attackTrendCtx = document.getElementById('attackTrendChart').getContext('2d');
        const attackTrendChart = new Chart(attackTrendCtx, {
            type: 'line',
            data: {
                labels: ['5月10日', '5月11日', '5月12日', '5月13日', '5月14日', '5月15日(预测)'],
                datasets: [{
                    label: '攻击次数',
                    data: [44, 64, 70, 605, 1086, 1738],
                    borderColor: 'rgba(46, 149, 248, 1)',
                    backgroundColor: 'rgba(46, 149, 248, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointBackgroundColor: function (context) {
                        return context.dataIndex === 5 ? 'rgba(255, 77, 79, 1)' : 'rgba(46, 149, 248, 1)';
                    },
                    pointRadius: function (context) {
                        return context.dataIndex === 5 ? 6 : 5;
                    }
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                if (context.dataIndex === 5) {
                                    label += '≈' + context.raw + '次 (预测)';
                                } else {
                                    label += context.raw + '次';
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(27, 100, 170, 0.3)'
                        },
                        ticks: {
                            color: '#A0AEC0'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#A0AEC0'
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>